<template>
  <!-- 在 3D 城市中可视化拟建建筑物 -->
  <div class="page-container">
    <SelectTrigger label="加载模型的方式：" :options="options" />
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
const options = ref([]); // 模型选项

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
    selectionIndicator: false, //
    shadows: true,
    shouldAnimate: true,
  });
  // 支持模型格式： COLLADA、gITF、OBJ
  //  加载本地模型
  function loadLocalModel(url, height) {
    viewer.entities.removeAll();
    const position = Cesium.Cartesian3.fromDegrees(
      -123.0744619,
      44.0503706,
      height
    );
    const heading = Cesium.Math.toRadians(135);
    const pitch = 0;
    const roll = 0;
    const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    // 方位
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(
      position,
      hpr
    );
    const entity = viewer.entities.add({
      name: url,
      position: position, // 位置
      orientation: orientation,
      model: {
        uri: url,
        minimumPixelSize: 128, // 用于指定模型的最小像素大小，而不考虑缩放
        maximumScale: 20000, // 模型的最大比例尺大小。 最小像素大小的上限
        silhouetteColor: Cesium.Color.RED,
        colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT, // 颜色混入的几种类型 （HIGHLIGHT 高亮  REPLACE   MIX ）
        colorBlendAmount: 0.5, // 颜色混入的深度 0-1
        color: Cesium.Color.RED, // 模型颜色
        silhouetteColor: Cesium.Color.GREEN, // 轮廓折线颜色
        silhouetteSize: 20, // 轮廓折线宽度
      },
    });
    viewer.trackedEntity = entity; // 相机聚焦实体
  }

  options.value = [
    {
      text: "加载本地模型",
      onselect: function () {
        loadLocalModel("/src/assets/model/PSFS.glb", 5000.0);
      },
    },
  ];
});
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
